<template>
  <a-card :bordered="false">
    <a-row v-if="dynamicFields.length === 0">
      <p style="text-align: center;">~暂无设计字段~</p>
    </a-row>

    <a-row :gutter="12" v-if="textFields.length>0 || numberFields.length>0 || dateFields.length>0 || textSearchFields.length>0">
      <input-text v-for="(field, index) in textFields" :ref="field.fieldCode" :form="form" :data="field" :key="field.fieldCode+index" />
      <input-number v-for="(field, index) in numberFields" :ref="field.fieldCode" :form="form" :data="field" :key="field.fieldCode+index" />
      <input-date v-for="(field, index) in dateFields" :ref="field.fieldCode" :form="form" :data="field" :key="field.fieldCode+index" />
      <input-search v-for="(field, index) in textSearchFields" :ref="field.fieldCode" :form="form" :data="field" :key="field.fieldCode+index" />
      <a-divider dashed />
    </a-row>

    <a-row v-if="switchFields.length>0">
      <input-switch v-for="(field, index) in switchFields" :ref="field.fieldCode" :form="form" :data="field" :key="field.fieldCode+index" />
      <a-divider dashed />
    </a-row>

    <a-row v-if="tagsFields.length>0">
      <input-tag v-for="(field, index) in tagsFields" :ref="field.fieldCode" :form="form" :data="field" :key="field.fieldCode+index" />
      <a-divider dashed />
    </a-row>

    <a-row v-if="fileFields.length>0">
      <upload-list v-for="(field, index) in fileFields" :ref="field.fieldCode" :form="form" :data="field" :key="field.fieldCode+index" />
      <a-divider dashed />
    </a-row>

    <a-row v-if="attachFields.length>0">
      <upload-list v-for="(field, index) in attachFields" :ref="field.fieldCode" :form="form" :data="field" :key="field.fieldCode+index" />
      <a-divider dashed />
    </a-row>

    <a-row v-if="textareaFields.length>0">
      <input-textarea v-for="(field, index) in textareaFields" :ref="field.fieldCode" :form="form" :data="field" :key="field.fieldCode+index" />
      <a-divider dashed />
    </a-row>

    <a-row v-if="pictureFields.length>0">
      <upload-cover v-for="(field, index) in pictureFields" :ref="field.fieldCode" :form="form" :data="field" :key="field.fieldCode+index" />
      <a-divider dashed />
    </a-row>

    <a-row v-if="editorFields.length>0">
      <tinymce-editor
        v-for="(field, index) in editorFields"
        :ref="field.fieldCode"
        :form="form"
        :data="field"
        :key="field.fieldCode+index" />
    </a-row>

  </a-card>
</template>

<script>
  import moment from 'moment'
  import store from '@/store'
  import inputText from './FormComponent/InputText'
  import InputSearch from './FormComponent/InputSearch'
  import InputNumber from './FormComponent/InputNumber'
  import InputTextarea from './FormComponent/InputTextarea'
  import InputTag from './FormComponent/InputTag'
  import InputSwitch from './FormComponent/InputSwitch'
  import InputDate from './FormComponent/InputDate'
  import UploadCover from './FormComponent/UploadCover'
  import TinymceEditor from './FormComponent/TinymceEditor'
  import UploadList from './FormComponent/UploadList'

  export default {
    name: 'DynamicForms',
    components: {
      inputText,
      InputSearch,
      InputTextarea,
      InputNumber,
      InputTag,
      InputSwitch,
      InputDate,
      UploadCover,
      UploadList,
      TinymceEditor
    },
    props: {
      form: {
        type: Object,
        required: true
      },
      initFromClear: {
        type: Boolean,
        required: false,
        default: true
      }
    },
    data () {
      return {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 3
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 20
          }
        },
        dynamicFields: [],
        textFields: [],
        textSearchFields: [],
        textareaFields: [],
        numberFields: [],
        dateFields: [],
        fileFields: [],
        attachFields: [],
        pictureFields: [],
        radioFields: [],
        checkboxFields: [],
        tagsFields: [],
        switchFields: [],
        editorFields: [],
        headers: {
          Authorization: 'bearer  ' + store.getters.token
        }
      }
    },
    mounted: function () {
      this.$nextTick(function () {

      })
    },
    created () {},
    methods: {
      moment,
      setFields (dynamicFields) {
        if (dynamicFields && dynamicFields.length > 0) {
          this.initClear()
          this.dynamicFields = dynamicFields
          this.handFields(dynamicFields)
        }
      },
      handFields (dynamicFields) {
        for (let i = 0; i < dynamicFields.length; i++) {
          const field = dynamicFields[i]
          if (field.inputType === 'text') {
            this.textFields.push(field)
          } else if (field.inputType === 'input-search') {
            this.textSearchFields.push(field)
          } else if (field.inputType === 'number') {
            this.numberFields.push(field)
          } else if (field.inputType === 'date') {
            this.dateFields.push(field)
          } else if (field.inputType === 'switch') {
            this.switchFields.push(field)
          } else if (field.inputType === 'textarea') {
            this.textareaFields.push(field)
          } else if (field.inputType === 'tags') {
            this.tagsFields.push(field)
          } else if (field.inputType === 'picture') {
            this.pictureFields.push(field)
          } else if (field.inputType === 'radio') {
            this.radioFields.push(field)
          } else if (field.inputType === 'checkbox') {
            this.checkboxFields.push(field)
          } else if (field.inputType === 'editor') {
            this.editorFields.push(field)
          } else if (field.inputType === 'file') {
            this.fileFields.push(field)
          } else if (field.inputType === 'attach') {
            this.attachFields.push(field)
          }
        }
        this.setDefaultVal()
      },
      setDefaultVal () {
        const _this = this
        // const timer = setInterval(() => {
        //   const attrs = Object.keys(_this.$refs)
        //   if (attrs.length > 0) {
        //     _this.loopSetFields()
        //     clearInterval(timer)
        //   }
        // }, 100)
        setTimeout(() => {
           _this.loopSetFields()
        }, 200)
      },
      submitFrom () {
        const {
          form: {
            validateFields
          }
        } = this
        validateFields((errors, values) => {
          if (!errors) {
            this.loopFields(values)
            this.$emit('submit', values)
          }
        })
      },

      loopFields (values) {
        const fieldArr = [this.tagsFields, this.pictureFields, this.editorFields, this.fileFields, this.attachFields]
        for (let i = 0; i < fieldArr.length; i++) {
          this.getFieldsValue(values, fieldArr[i])
        }
      },
      loopSetFields () {
        const fieldArr = [this.tagsFields, this.pictureFields, this.editorFields, this.fileFields, this.attachFields]
        for (let i = 0; i < fieldArr.length; i++) {
          this.setFieldsValue(fieldArr[i])
        }
      },
      getFieldsValue (values, fields) {
        if (fields.length > 0) {
          for (let i = 0; i < fields.length; i++) {
            const field = fields[i]
            const value = this.$refs[field.fieldCode][0].getFieldValue()
            values[field.fieldCode] = value
          }
        }
      },
      setFieldsValue (fields) {
        if (fields.length > 0) {
          for (let i = 0; i < fields.length; i++) {
            const field = fields[i]
            if (this.$refs.hasOwnProperty(field.fieldCode)) {
              this.$refs[field.fieldCode][0].setFieldValue(field.defaultValue)
            }
          }
        }
      },
      initClear () {
        this.textFields = []
        this.textSearchFields = []
        this.numberFields = []
        this.dateFields = []
        this.switchFields = []
        this.textareaFields = []
        this.tagsFields = []
        this.pictureFields = []
        this.radioFields = []
        this.checkboxFields = []
        this.editorFields = []
        this.fileFields = []
        this.attachFields = []
        if (this.initFromClear) {
          this.form.resetFields()
        }
      },
      resetFieldsClear (resetForm) {
        this.textFields = []
        this.textSearchFields = []
        this.numberFields = []
        this.dateFields = []
        this.switchFields = []
        this.textareaFields = []
        this.tagsFields = []
        this.pictureFields = []
        this.radioFields = []
        this.checkboxFields = []
        this.editorFields = []
        this.fileFields = []
        this.attachFields = []
        if (resetForm) {
          this.form.resetFields()
        }
      },
      clearFields () {
        const fieldArr = [this.tagsFields, this.pictureFields, this.editorFields, this.fileFields, this.attachFields]
        for (let i = 0; i < fieldArr.length; i++) {
          this.setFieldsClear(fieldArr[i])
        }
      },
      setFieldsClear (fields) {
        if (fields.length > 0) {
          for (let i = 0; i < fields.length; i++) {
            const field = fields[i]
            this.$refs[field.fieldCode][0].fieldClear()
          }
        }
      }
    }
  }
</script>
<style>
  /* you can make up upload button and sample style by using stylesheets */
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .file_div {
    margin-bottom: 15px;
    border: solid rgb(208, 208, 208) 1px;
    min-height: 100px;
    overflow: auto;
    border-radius: 5px;
  }

  .has-error .ant-form-explain,
  .has-error .ant-form-split {
    color: #f5222d;
    line-height: 20px
  }
</style>
